<template>
  <div>
    <div id="001" style="width:50%;height:600px"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
  
      option001: {
        backgroundColor: "rgba(7, 29, 29, 1)",
        series: [
          {
            type: "tree",
            edgeShape: "polyline", // 链接线是折现还是曲线
            orient: "TB",
            roam: true,
            data: [
              {
                ID: 0,
                NAME: "根节点",
                children: [
                  {
                    ID: 1,
                    NAME: "子节点1",
                    children: [
                      {
                        ID: 11,
                        NAME: "子节点1-1",
                      },
                      {
                        ID: 12,
                        NAME: "子节点1-2",
                      },
                      {
                        ID: 13,
                        NAME: "子节点1-3",
                      },
                    ],
                  },
                ],
              },
            ],
            width: "85%",
            height: "75%",
            left: "5%",
            right: "5%",
            top: "12%",
            bottom: "1%",
            zoom:0.6,
            symbolSize: 2,
            initialTreeDepth: 10,
            label: {
              normal: {
                position: 0,
                align: "center",
                padding: [10, 20],
                fontWeight: "bold",
                formatter: function(param) {
                  let NAME =
                    param.data.NAME.substring(0, 8) +
                    "\n" +
                    param.data.NAME.substring(8, 16) +
                    "\n" +
                    param.data.NAME.substring(16);
                  return [
                    `{img|}`,
                    `{VALUE|${param.data.ID}}`,
                    `{NAME|${NAME}}`,
                  ].join("\n");
                },
                rich: {
                  img: {
                    backgroundColor: {  
                      image:
                        "",
                    },
                    width: 93,
                    height: 78,
                  },
                  VALUE: {
                    color: "#4cE4E6",
                    fontSize: 18,
                    fontFamily: "DIN",
                    verticalAlign: "top",
                    position: "top",
                    backgroundColor: "#071D1D",
                    width: 93,
                    padding: [5, 0],
                  },
                  NAME: {
                    color: "#fff",
                    fontSize: 14,
                    verticalAlign: "top",
                    backgroundColor: "#071D1D",
                    width: 93,
                    padding: [5, 0],
                  },
                },
              },
            },
            lineStyle: {
              color: "#158387",
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
          },
        ],
      },
    };
  },
  methods: {
    drawLine() {
      let charts001 = this.$echarts.init(document.getElementById("001"));
      charts001.setOption(this.option001);
    },
  },
  mounted() {
    this.drawLine();
  },
};
</script>
<style lang="less" scoped></style>
